<template>
  <div>
    <el-row>
      <el-radio-group v-model="selectedType">
        <el-button
          v-for="(item, index) in typesList"
          :key="index"
          :type="item.actvie ? 'primary' : ''"
          @click="changeType(item, index)"
          >{{ item.label }}</el-button
        >
      </el-radio-group>
    </el-row>
    <div class="content_border">
      <!-- 工单信息 -->
      <WorkInfo
        v-if="selectedType == 0 && workOrderType !== 4"
        :fromdata="orderInfo"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
      />
      <!-- 报价单详情信息 -->
      <QuotationWorkInfo
        v-if="selectedType == 0 && workOrderType === 4"
        :fromdata="orderInfo"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
      />
      <!-- 客户信息 -->
      <ClientInfo
        v-if="selectedType == 1"
        :fromdata="orderInfo"
        :workOrderType="workOrderType"
      />
      <!-- 车辆信息 -->
      <CarInfo v-if="selectedType == 2" :fromdata="orderInfo" />
      <!-- 工单项目列表 -->
      <ProjectInfo
        v-if="selectedType == 3"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
      />
      <!-- 工单配件列表 -->
      <FittingInfo
        v-if="selectedType == 4"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
        :workOrderCode="orderInfo.workOrderCode"
      />
      <!-- 工单精品列表 -->
      <BoutiqueInfo
        v-if="selectedType == 5"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
      />
      <!-- 签字记录 -->
      <SignatureInfo
        v-if="selectedType == 6"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
      />
      <!-- 工单返工列表 -->
      <ReworkInfo
        v-if="selectedType == 7"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
      />
      <!-- 工单退料 -->
      <ReturnInfo
        v-if="selectedType == 8"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
        :getConfig="getConfig"
      />
      <!-- 工单换料 -->
      <OrderChange
        v-if="selectedType == 9"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
        :getConfig="getConfig"
      />

    </div>
  </div>
</template>

<script>
import baseMixin from '@/mixins/base'
import { parseTimeToYMDHMS } from '@/utils'
import CarInfo from './car-info'
import ClientInfo from './client-info'
import SignatureInfo from './signature-info'
import ProjectInfo from './project-info'
import FittingInfo from './fitting-info'
import ReworkInfo from './rework-info'
import ReturnInfo from './return-info'
import WorkInfo from './work-info'
import BoutiqueInfo from './boutique-info'
import QuotationWorkInfo from './quotation-work-info'
import OrderChange from './order-change'

import config from '@/views/after-sale/workOrderManage/view/config/index' //导入配置文件

export default {
  name: 'viewClientManage',
  components: {
    CarInfo,
    ClientInfo,
    SignatureInfo,
    ProjectInfo,
    FittingInfo,
    ReworkInfo,
    ReturnInfo,
    WorkInfo,
    BoutiqueInfo,
    QuotationWorkInfo,
    OrderChange
  },
  props: {
    //工单id
    workOrderId: {
      type: Number | String,
    },
    //工单类型 1 快速单 2洗车单子
    workOrderType: {
      type: String | Number,
      default: 1,
    },
  },
  data() {
    return {
      types: [
        { label: '工单信息', value: 0, actvie: true },
        { label: '客户信息', value: 1, actvie: false },
        { label: '车辆信息', value: 2, actvie: false },
        { label: '工单项目列表', value: 3, actvie: false },
        { label: '工单配件列表', value: 4, actvie: false },
        { label: '工单精品列表', value: 5, actvie: false },
        { label: '签字记录', value: 6, actvie: false },
        { label: '工单返工列表', value: 7, actvie: false },
        { label: '工单退料', value: 8, actvie: false },
        { label: '工单换料', value: 9, actvie: false },
      ],
      selectedType: 0,
      orderInfo: {}, //工单信息
      getConfig: {},
    }
  },
  computed: {
    typesList() {
      let _notMenuButton = this.render(this.getConfig.notMenuButton)
      //<!--修复人：杨明超 修改bug #393  所有工单详情中，工单退料：只在作业中和申请退款后显示  -->
      //先判断原来需不需要显示退料

      //更改： 这个显示判断就直接判断未派工的时候不显示就行了
      if (!this.getConfig.notMenuButton.includes(8)) {
        //原来要显示退料
        let { status } = this.orderInfo
        if (status && status == '未派工') {
          let _index = 0;
          _notMenuButton.map((item, index) => {
            if (item.value == 8) {
              _index = index
            }
          })
          _notMenuButton.splice(_index, 2)
        }
      }
      //报价单没有换料
      if (this.workOrderType == 4) {
        _notMenuButton = _notMenuButton.filter(e => e.value !== 9);
      }
      return _notMenuButton
    },
  },
  async created() {
    this.getConfig = config[`workOrderType${this.workOrderType}`]
    console.log(this.getConfig)
    let option = await this.getConfig.getOrderInfo(this.workOrderId)
    if (option.success) {
      this.orderInfo = option.data
    }
  },
  methods: {
    render(showItem = []) {
      let typesList = Object.assign([], this.types)
      return typesList.filter((item) => {
        let isEist = showItem.findIndex((value) => item.value == value)
        if (isEist == -1) {
          return item
        }
      })
    },
    changeType(item, index) {
      this.selectedType = item.value
      this.types.map((e, i) => {
        if (e.value == item.value) {
          e.actvie = true
        } else {
          e.actvie = false
        }
      })
    },
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.content_border {
  border: 1px solid #dcdfe6;
  padding: 15px;
  margin-top: 20px;
}
</style>
